<template>
	<view>
		<view class="box">
			<image class="img" :src="imgs[0]"></image>
			<button class="btn" @click="chooseImg()">选择图片</button>
			<button class="btn" @click="preViewImg(imgs)">预览图片</button>
			<button class="btn" @click="imgInfo()">图片信息</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img:"/static/img/defluatImage.png",
				imgs:[
					 "/static/img/defluatImage.png",
				]
			}
		},
		methods: {
			chooseImg(){
				console.log("chooseImg");
				uni.chooseImage({
					count:1,
					success: (res) => {
						console.log("img src change, now value:"+ res.tempFilePaths[0]);
						this.img=res.tempFilePaths[0];
						this.imgs=res.tempFilePaths;
					}
				})
			},
			
			preViewImg(image) {
				console.log("preViewImg");
				uni.previewImage({
					urls:image
				})
			},
			
			imgInfo() {
				uni.getImageInfo({
					src:this.img,
					success: (res) => {
						console.log(res.width+","+res.height);
					}
				})
			}
		}
	}
</script>

<style>
	.box {
		display: flex;
		justify-content: center;display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.img {
		height: 100px;
		width: 100px;
		border-radius: 100px;
		margin-top: 10px;
	}
	.btn {
		margin: 10rpx;
	}
</style>